<template>
  <div class="app-container">
    <!--分享内容-->
    <yd-infinitescroll :distance="20" :callback="getMyComments" ref="infinitescroll">
      <div slot="list" style="height:4rem;position:relative">
        <div
          style="z-index:10;position:absolute;left:.15rem;bottom:.4rem;z-index:10;display:flex;align-items:center"
        >
          <img
            :src="require('../../image/defaultHeadImg.jpeg')"
            alt
            style="width:1.2rem;height:1.2rem;border-radius:50%;margin-right:.35rem"
          />
          <div
            style="height:100%;line-height:1;font-size:.4rem;font-weight:700;color:#fff"
          >{{myInfo.nickname}}</div>
        </div>
        <img
          :src="require('../../image/美食2.jpeg')"
          alt
          style="width:100%;height:4rem;position:absolute;left:0;top:0;z-index:1"
        />
      </div>
      <div slot="list">
        <div
          style="text-align:left;height:1rem;line-height:1rem;font-size:.35rem;font-weight:700;padding-left:.25rem;background:#fff;margin-bottom:.15rem"
        >评价 {{total}}</div>
        <div v-for="(i,index) in shareComment" :key="index" class="item">
          <div class="shareContent">
            <!--                用户信息-->
            <div class="userContent">
              <div class="userLeft">
                <img :src="i.share.picUrl && require('../../image/defaultHeadImg.jpeg')" alt />
                <p>{{i.share.nickname}}</p>
              </div>
              <!--                    发布时间-->
              <div class="userRight">
                <p>{{$moment(i.share.shareTime)}}</p>
              </div>
            </div>
            <!--            内容-->
            <div class="Scontent">
              <router-link :to="{path:'/shareDetail',query:{id:i.share.id}}">
                <p>{{i.share.content}}</p>
              </router-link>
              <!--            图片-->
              <div class="comment-image">
                <img
                  v-for="(i,index) in (i.share.imgs || 0)"
                  :key="index"
                  :src="i && require('../../image/defaultHeadImg.jpeg')"
                  alt
                />
              </div>
            </div>

            <!-- 图标 -->
            <div class="share-function">
              <div class="share-function-icon">
                <yd-icon name="share3" size=".32rem"></yd-icon>
                <span>转发</span>
              </div>
              <router-link
                :to="{path:'/shareDetail',query:{id:i.share.id}}"
                class="share-function-icon"
              >
                <div>
                  <yd-icon name="feedback" size=".32rem"></yd-icon>
                  <span>评论 {{i.commentCount || 0}}</span>
                </div>
              </router-link>

              <div class="share-function-icon" @click="shareThumbsUp(i)">
                <yd-icon name="good" size=".32rem"></yd-icon>
                <span>赞 {{i.fabulousCount || 0}}</span>
              </div>
            </div>

            <!--                评论-->
            <div class="comments" v-if="i.comments && i.comments.length">
              <div class="comment-box" v-for="(comment,index) in i.comments" :key="index">
                <!--                    评论用户信息-->
                <!-- <div class="comment-top"> -->
                <!-- <div class="comment-userinfo"> -->
                <!-- <img :src="comment.picUrl && require('../../image/1.jpg')" alt /> -->
                <!-- <span>{{comment.nickname}}</span> -->
                <!-- </div> -->
                <!-- <span>{{$moment(comment.createTime)}}</span> -->
                <!-- </div> -->
                <!--    评论内容-->
                <p class="com">
                  <router-link to="/" style="color:#e74505">{{comment.nickname}}：</router-link>
                  {{comment.content}}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </yd-infinitescroll>
  </div>
</template>

<script>
import { myComments } from "@/api";
import { getUserId } from "@/toolset";

export default {
  name: "myComment",
  data() {
    return {
      myInfo:
        (localStorage.getItem("userData") &&
          JSON.parse(localStorage.getItem("userData"))) ||
        {},
      pageSize: 10,
      pageNum: 1,
      shareComment: [],
      total: 0
    };
  },
  mounted() {
    this.getMyComments();
  },
  methods: {
    getMyComments() {
      const userId = 1 || getUserId();
      if (userId)
        myComments({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          request: {
            userId
          }
        }).then(res => {
          this.total = res.data.totalSize;
          const { pageNum, totalPages, result: list } = res.data;

          this.shareComment = [...this.shareComment, ...list];

          /* 单次请求数据完毕 */
          this.$refs.infinitescroll.$emit("ydui.infinitescroll.finishLoad");

          if (list.length < this.pageSize || pageNum >= totalPages) {
            /* 所有数据加载完毕 */
            this.$refs.infinitescroll.$emit("ydui.infinitescroll.loadedDone");
            return;
          }

          this.pageNum++;
        });
    }
  }
};
</script>

<style scoped lang='less'>
.app-container {
  height: 100%;
}
.item {
  margin-bottom: 0.15rem;
}
.shareContent {
  width: 100%;
  text-align: left;
  padding: 0.15rem;
  background: white;
  margin-bottom: 0.15rem;
  border-radius: 0.25rem;
}

.Scontent p {
  margin: 0.15rem 0;
  font-size: 0.3rem;
  padding: 0 0.15rem;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.userContent {
  display: flex;
  width: 100%;
  height: 1rem;
  /*padding-top:.15rem;*/
}

.userLeft {
  display: flex;
  line-height: 1rem;
  width: 50%;
  font-size: 0.32rem;
  font-weight: 600;
}

.userLeft img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin-right: 0.15rem;
}

.userRight {
  line-height: 1rem;
  width: 50%;
  text-align: right;
}

.comment-image {
  display: flex;
  flex-wrap: wrap;
}

.comment-image img {
  height: 30.75vw;
  width: 30.75vw;
  align-self: flex-start;
  margin: 0.05rem;
  display: block;
}

.comments {
  background-color: #f2f2f2;
  padding: 0.15rem;
  border-radius: 0.15rem;
}

.com {
  font-size: 0.3rem;
  overflow: hidden;
  line-height: 0.5rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  // margin-left: 1rem;
  position: relative;
  word-break: break-all;
  // top: -0.25rem;
}

.comment-top {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 0.2rem;
}

.comment-top:after {
  content: "";
  display: block;
  width: calc(100%);
  transform: scaleY(0.33);
  height: 1px;
  background-color: #ccc;
  position: absolute;
  top: -0.2rem;
  right: 0;
}
.comment-top > span {
  display: inline-block;
  width: 50%;
  line-height: 0.8rem;
  color: gray;
  text-align: right;
}

.comment-top span {
  position: relative;
  top: -0.1rem;
}

.comment-top img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}

.comment-userinfo {
  width: 50%;
  font-size: 0.28rem;
  font-weight: 600;

  img {
    width: 0.7rem;
    height: 0.7rem;
    display: inline-block;
    vertical-align: middle;
  }

  span {
    vertical-align: middle;
  }
}

.share-function {
  width: 100%;
  display: flex;
  // border: 1px solid #eee;
  margin-bottom: 0.15rem;
}

.share-function-icon {
  flex: 1;
  text-align: center;
  margin: 0.2rem 0;
  border-left: 1px solid #eee;
  font-size: 0.3rem;

  &:first-child {
    border: none;
  }

  span {
    margin-left: 0.15rem;
    letter-spacing: 0.02rem;
  }
}
</style>